<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:set var="ctx" value="${pageContext.request.contextPath}" scope="page"></c:set>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${product.feature}</title>
<link rel="stylesheet" href="${ctx}/css/templatemo_style.css" />
<!-- 页面整体布局样式定义 -->
<link rel="stylesheet" href="${ctx}/css/ddsmoothmenu.css" />
<!-- 菜单样式定义 -->
<link rel="stylesheet" href="${ctx}/css/nivo-slider.css" media="screen" />
<!-- 焦点图样式定义 -->
<link rel="stylesheet" href="${ctx}/css/bootstrap.min.css" />
<script type="text/javascript" src="${ctx}/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript"
	src="${ctx}/js/jquery.nivo.slider.pack.js"></script>
<!-- 焦点图JS脚本定义 -->
<script type="text/javascript">
	function showUserName() {
		var name = "${user.username}";
		if (name != "") {
			$("#login").html(name); //把登录换成用户名
			$("#exitP").show(); //.show()方法是显示，.hidden()方法是隐藏
			$("#login").attr("href",
					"${ctx}/UserServlet?flag=info&userId=${user.userId}");
		} else {
			$("#exitp").hidden();
		}
	}
</script>
<style type="text/css">
.kuan {
	width: 65px;
}

.xia {
	position: absolute; left; 0;
	bottom: 0;
	margin-bottom: 20px;
	margin-left: 8%;
}

.zhong {
	text-align: center;
}

.zuo {
	margin-left: 80px;
}
</style>
<!-- 焦点图JS脚本定义 -->
</head>

<body>
	<div id="templatemo_body_wrapper">
		<div id="templatemo_wrapper">
			<!-- header -->
			<div id="templatemo_header">
				<div id="site_title">
					<h1>
						<a href="#">穿美在线鞋城</a>
					</h1>
				</div>
				<div id="header_right">
					<p>
						<a href="${ctx}/UserServlet?flag=login" id="login" target="_blank">登陆</a>&nbsp;
						<span id="exitP" style="display: none"><a
							href="${ctx}/UserServlet?flag=logout" id="exit" target="_blank">注销</a></span>
					</p>
				</div>
				<div class="cleaner"></div>
			</div>
			<!-- END of templatemo_header -->
			<!-- menu -->
			<div id="templatemo_menubar">
				<div id="top_nav" class="ddsmoothmenu">
					<ul>
						<li><a href="pro?flag=index">首页</a></li>
						<li><a href="pro?flag=product" class="selected">产品</a></li>
						<li><a href="${ctx}/ShoppingCartServlet">我的购物车</a></li>
						<li><a href="${ctx}/OrderServlet?flag=qoi">我的订单</a></li>
					</ul>
					<br style="clear: left" />
				</div>
				<!-- end of ddsmoothmenu -->
			</div>
			<!-- END of templatemo_menubar -->

			<!-- main -->
			<div id="templatemo_main">
				<!-- 侧边栏 -->
				<div id="sidebar" class="float_l">
					<!-- sidebar 1 -->
					<div class="sidebar_box">
						<span class="bottom"></span>
						<h3>品牌</h3>
						<c:forEach items="${brand}" var="bra">
							<div class="content">
								<ul class="sidebar_list">
									<li><a href="pro?flag=brand&&category_id=${bra.category_id}"><c:out value="${bra.name}"/></a></li>
								</ul>
							</div>
						</c:forEach>
					</div>
					<!-- sidebar 2 -->
					<div class="sidebar_box">
						<span class="bottom"></span>
						<h3>热卖单品</h3>
						<c:forEach items="${hot}" var="hot">
							<div class="content">
								<div class="bs_box">
									<a
										href="${ctx}/pro?flag=detailed&&product_id=${hot.product_id}"><img
										src="${ctx}/${hot.imgpath}" alt="image"
										style="width: 96px; height: 96px" /></a>
									<h4>
										<br /> <a
											href="${ctx}/pro?flag=detailed&&product_id=${hot.product_id}">${hot.feature}</a>
									</h4>
									<br />
									<p class="price">${hot.price}.00￥</p>
									<div class="cleaner"></div>
								</div>
							</div>
						</c:forEach>

					</div>
				</div>
				<!-- END of sidebar -->

				<!-- 内容展示区 -->
				<div id="content" class="float_r">
					<div class="page-header">
						<h3>
							<b>商品详情</b> <small></small>
						</h3>
					</div>
					<div class="row">
						<div class="col-md-1"></div>
						<div class="col-md-10">
							<img src="${ctx}/${product.imgpath}" style="width: 400px" />
						</div>
						<div class="col-md-1"></div>
					</div>

					<div class="row">
						<div class="col-md-4"></div>
						<div class="col-md-8">

							<table class="table table-hover zuo">
								<tr>
									<th colspan="2">${product.feature}</th>
								</tr>
								<tr>
									<td>单价</td>
									<td>${product.price}</td>
								</tr>
								<tr>
									<td>库存</td>
									<td>${stock}</td>
								</tr>
								<tr>
									<td>型号</td>
									<td>${product.model}</td>
								</tr>
								<tr>
									<td>销量</td>
									<td>${qu}</td>
								</tr>
								<form action="${ctx}/ShoppingCartServlet" method="post">
								<tr>

									<td><input type="hidden" name="product_id"
										value="${product.product_id}"> <input type="text"
										class="form-control kuan" placeholder=" 数量" name="num"></td>
									<td><input type="submit" class="btn btn-default"
										value="添加购物车" /></td>
									<input type="hidden" name="flag" value="insert" />
									<input type="hidden" name="product_id" value="${product.product_id}" />

								</tr>
							  </form>
							</table>

						</div>

					</div>
					<br />
					<div class="page-header">
						<h3>
							<b>最近浏览</b> <small>其实是销量前三</small>
						</h3>
					</div>

					<c:forEach items="${brow}" var="brow">
						<div class="product_box">
							<a href="${ctx}/pro?flag=detailed&&product_id=${brow.product_id}"><img
								src="${ctx}/${brow.imgpath}" alt="Shoes 2" style="width: 160px" /></a>
							<p>${brow.feature}</p>
							<p class="product_price">${brow.price}.00￥</p>
							<!--这是id~${list.product_id}-->
							<a href="${ctx}/ShoppingCartServlet?flag=insert&product_id=${brow.product_id}" class="addtocart"></a> <a
								href="${ctx}/pro?flag=detailed&&product_id=${brow.product_id}"
								class="detail"></a> <input type="hidden" name="flag" value="ls" />
						</div>
					</c:forEach>

				</div>

				<div class="cleaner"></div>
			</div>
			<!-- END of templatemo_main -->

			<!-- footer -->
			<div id="templatemo_footer">
				<p>
					<a href="${ctx}/pro?flag=index">首页</a> | <a
						href="${ctx}/pro?flag=product">产品</a> | <a
						href="${ctx}/ShoppingCartServlet">我的购物车</a> | <a
						href="${ctx}/OrderServlet?flag=qoi">我的订单</a>
				</p>
				版权所有 (c) 2018 <a href="javascript:void(0);">金桥软件</a>
			</div>
			<!-- END of templatemo_footer -->

		</div>
		<!-- END of templatemo_wrapper -->
	</div>
	<!-- END of templatemo_body_wrapper -->

	<script type="text/javascript">
		$(function() {
			$('#slider').nivoSlider();
		});
	</script>
	<script type="text/javascript">
		$(function() {
			showUserName();
		});
	</script>

</body>

</html>